<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入客户姓名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="mt-1">
			<Row>
				<Col class="p-1" v-for="(row, index) in clients" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
					:xxl="6">
				<div :style="'background-image:url('+row.cover+'); background-size: 100% 100%;'" 
					class=" rounded shadow overflow-hidden">
					<div class="bg-black-80 p-2 d-flex 	text-fuguang justify-content-start text-lg text-blod">
						<span>{{row.nc}}</span>
					</div>	
					<div class="p-2 bg-black-50 position-relative  d-flex justify-content-between align-items-center">
						<div class="w-25  position-relative">
							<div class="padding-top-100"></div>
							<div class="position-absolute rounded-circle overflow-hidden top0">
								<img class="w-100 h-100" :src="row.heading"/>
							</div>
							<div class="p-2 text-fuguang text-center text-xss">{{row.clientid}}</div>
						</div>
						<div class="w-75">
							<div class="p-2 text-right text-fuguang iconfont icon-xingbie1 font-b" >
								<span v-if="row.sex == '1'" class="text-sm">男</span>
								<span v-if="row.sex == '2'" class="text-sm">女</span>
							</div>
							<div class="p-2 text-fuguang text-right text-sm iconfont icon-nianling1 ">
								<span class="text-sm ">{{row.age}}岁</span>
							</div>
						</div>
					
					</div>

					<div class="p-2 bg-black-50 d-flex justify-content-end">
					  <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.clientid, row.hyjlid)">详细</Button>
					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey:  "",

				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
				},
				clients:[]
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					path: "/client/new"
				})
			},
			show: function(clientid, hyjlid) {
				this.$router.push({
					path: "/client/detail?id=" + clientid + "&hyjlid=" + hyjlid
				})
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/client/hyjl/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size:this.tableInfo.pageSize,
						
					}
				}).then(data => {
					console.log(data.records)
					this.clients = data.records;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>